<template>
    <!--title为当前页标题
        组件要小，如遇list，只将item做成组件，其他的都写在页面中
    -->
    <div id="home">
        <div v-if="step===1">
            <div class="title">编辑菜谱</div>
            <input class="full-input" type="text" placeholder="请输入菜谱名称" v-model="cook.title">
            <textarea class="desc-box" v-model="cook.desc" placeholder="请输入菜谱简介" ></textarea>
        </div>
        <div v-if="step===2">
            <div class="title">准备食材</div>
            <div class="food-box" v-for="item in food">
                <input class="box-input" type="text" placeholder="食材" v-model="item.name">&nbsp;：
                <input class="box-input" type="text" placeholder="量" v-model="item.weight">
            </div>
            <div class="iconfont icon-roundadd add-food-btn" @click="add()"></div>
        </div>
        <div v-if="step===3">
            <div v-for="(st,index) in stepList">
                <div class="title">步骤{{index+1}}</div>
                <div>
                    <textarea class="step-text-box" v-model="st.text" placeholder="请输入步骤1" ></textarea>
                </div>
                <div v-if="st.timer">
                    <div class="timer-text">倒计时{{st.timer}}分钟</div>
                </div>
                <div class="add-media-box">
                    <div @click="addPhoto(st,index)" class="add-media-btn" >
                        <i class="iconfont icon-camera"></i>
                        <div class="text">图片</div>
                    </div>
                    <div @click="addMedia(st,index)" class="add-media-btn" >
                        <i class="iconfont icon-shipin"></i>
                        <div class="text">视频</div>
                    </div>
                    <div @click="addTimer(st,index)" class="add-media-btn last" >
                        <i class="iconfont icon-shijian"></i>
                        <div class="text">倒计时</div>
                    </div>
                    <timer-modal @close="closeTimer" :counter="st.timer" v-if="setTimer"></timer-modal>
                </div>
            </div>
            <div class="left-btn" @click="addStep()">增加</div>
        </div>
        <div class="right-btn" v-if="step!==3" @click="next()">下一步</div>
        <div class="right-btn" v-if="step==3" @click="compl()">完成</div>
    </div>
</template>

<script>
    import {recipeApi} from '../../api/recipe'
    import timerModal from '../../components/timerSet.vue'
    export default {
        data () {
            return {
                title:'智能菜谱',
                step: 1,
                cook:{name:'',desc:''},
                food:[{name:'',weight:''}],
                stepList:[{text:'',pho:'',media:''}],
                setTimer:false,
                curItem:'',
                curIndex:0,
            }
        },
        components:{timerModal},
        computed: {
            //将存在store中的数据取出

        },
        beforeCreate() {
            const that = this;
            let store = that.$store
            /*基本规则
            * 所有不需要token的请求都放在这里
            * 这里不出现window，document等DOM元素
            * 这里获得的数据都要存储在store中
            * 写法如下
            * */
            /*
            * 将所有的请求处理以数组放在promise中
            * that.data().data调用数据
            * */
            /*return Promise.all([
                store.state.homeStore.listImg = "xxx",
            ])*/
        },
        mounted: function() {
            /*
            * 所有需要token的请求都放在这里
            * 可以使用DOM元素
            * 这里的数据可以放在data中
            * */
        },
        methods: {
           add(){
                this.food.push({name:'',weight:''})
            },
            addStep(){
                this.stepList.push({text:'',pho:'',media:''})
            },
            next(){
                console.log(this.step,12);
                if(this.step===1){
                    localStorage.cook = JSON.stringify(this.cook)
                }
                else if(this.step===2){
                    localStorage.food = JSON.stringify(this.food)
                }
                this.step++
            },
            compl(){
                let that = this
                localStorage.stepList = JSON.stringify(this.stepList)
              let data = {
                    title:this.cook.title,
                    desc:this.cook.desc,
                    food:this.food,
                    steps:this.stepList
              }
              console.log(data);
//                this.$router.push({name:'cook'})
                recipeApi.add(data).then(function (res) {
                  that.msg={
                      type:1,url:location.origin + '/cook/recipe/res.data.data.id'
                  }
                })
            },
            addPhoto(item,i){
                item.pho = 1
                this.stepList.splice(i,1,item)
            },
            addMedia(item,i){
                item.media = 1
                this.stepList.splice(i,1,item)
            },
            addTimer(item,i){
                this.curItem = item
                this.curIndex = i
                this.setTimer = true;
            },
            closeTimer(value){
                this.setTimer = false;
                let i = this.curIndex
                this.curItem.timer = value
                this.stepList.splice(i,1,this.curItem)
            }
        }
    }
</script>
<style lang="scss">
    #home{
        padding: 0 12px;
        box-sizing: border-box;
    }
    .title {
        text-align:  center;
        line-height:  50px;
        font-size: 20px;
    }

    .full-input {
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
    }
    .box-input {
        width: 120px;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
    }
    .food-box {
        text-align: center;
    }

    .right-btn {
        right:  20px;
        margin:  20px;
        background: orange;
        color: #fff;
        padding: 6px 8px;
        border-radius: 8px;
        position: absolute;
        bottom:20px;
    }
    .desc-box {
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
        height: 400px;
    }
    .step-text-box {
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-top: 12px;
        height: 100px;
    }
    .add-food-btn {
        display: inline-block;
        margin: 10px 45px 0 0;
        color: orange;
        text-align: center;
        float: right;
    }
    .add-media-box {
        text-align: center;
        display: flex;
        max-width: 300px;
        margin: 30px auto;
    }
    .add-media-btn {
        display: inline-block;
        margin: 20px 0;
        line-height: 46px;
        /*width: 60px;*/
        /*border-radius: 50%;*/
        /*border: 1px solid coral;*/
        border-right: 1px solid orange;
        color: orange;
        text-align: center;
        font-size: 16px;
        font-weight: 200;
        flex:1;
        position: relative;
        .text{
            padding-left:28px;
            display:inline-block;
        }
        .iconfont{
            position: absolute;
        }
    }
    .add-media-btn.last{
        border-right: 0;
    }
    .left-btn {
        left: 20px;
        margin: 20px;
        color: orange;
        padding: 6px 8px;
        border-radius: 8px;
        position: absolute;
        bottom: 20px;
        border: 1px solid orange;
    }
    .timer-text{
        line-height: 46px;
    }
</style>

